<template>
    <div id="app">
        <div ref="dv">dv</div>
        <!-- ref 绑定组件上会获取组件的实例，可以拿到组件的data属性和methods方法 -->
        <Son ref="son"></Son>
        <el-card class="login-card">
            <!-- el-form 整个表单 -->
            <!-- el-form-item表单每一项 -->
            <!-- 表单：数据，校验数据 model rules -->
            <!-- 表单项：具体校验表单哪一项数据 prop -->
            <!-- 输入框: v-model -->
            <el-form
                style="margin-top: 50px"
                :model="loginForm"
                :rules="loginRules"
                ref="loginForm"
            >
                <el-form-item prop="mobile">
                    <el-input
                        placeholder="请输入手机号"
                        v-model="loginForm.mobile"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                        placeholder="请输入密码"
                        v-model="loginForm.password"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        style="width: 100%"
                        @click="submit"
                    >
                        登录
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import Son from "./Son.vue";
export default {
    data() {
        // 第三位必须为 9
        // 密码中不能包含关键词 heima
        const checkMobile = (rule, value, callback) => {
            // 不管成功失败都要写callback
            if (value.charAt(2) === "9") {
                callback();
            } else {
                callback(new Error("第三位必须是9"));
            }
        };
        const checkPassword = (rule, value, callback) => {
            value.includes("heima")
                ? callback(new Error("你有一些敏感信息"))
                : callback();
        };
        return {
            loginForm: {
                mobile: "",
                password: "",
            },
            loginRules: {
                // 1. 提示信息
                // 2. 触发事件
                // 3. 校验规则
                // **手机号**  1.必填 2.手机号格式校验 3. 失去焦点校验
                // **密码** 1.必填 2.6-16位长度 3. 失去焦点校验
                // 注意点：校验顺序和书写的顺序是有关系的，从上至下。必填除外，必填最先校验
                mobile: [
                    {
                        pattern: /^1[3-9]\d{9}$/,
                        trigger: "blur",
                        message: "手机格式也不对啊！！！",
                    },

                    {
                        required: true,
                        message: "手机号必填啊！！！",
                        trigger: "blur",
                    },
                    {
                        trigger: "blur",
                        validator: checkMobile,
                    },
                ],
                password: [
                    {
                        required: true,
                        message: "密码必填啊！！！",
                        trigger: "blur",
                    },
                    {
                        min: 6,
                        max: 16,
                        message: "密码长度不对啊！！！",
                        trigger: "blur",
                    },
                    {
                        trigger: "blur",
                        validator: checkPassword,
                    },
                ],
            },
        };
    },
    components: { Son },
    methods: {
        async submit() {
            // this.$refs.loginForm.validate((isOk) => {
            //     // isOk 是否校验成功，是一个bool值
            //     if (isOk) {
            //         console.log("成功");
            //     } else {
            //         console.log("失败");
            //     }
            // });
            // promise .then之后返回的是一个promise(状态是成功的) .catch之后返回的也是一个promise(状态是失败的)
            // new Error("") 不会走catch，代码错误会走catch
            // new Promise((r, rejected) => {
            //     r();
            // })
            //     .then(() => {
            //         console.log("成功");
            //     })
            //     .catch(() => {
            //         console.log("失败");
            //     })
            //     .then(() => {
            //         console.log("失败2");
            //     })
            //     .catch(() => {
            //         console.log("失败3");
            //     });
            // this.$refs.loginForm
            //     .validate()
            //     .then(() => {
            //         console.log("成功");
            //     })
            //     .catch(() => {
            //         console.log("失败");
            //     });
            // try {
            //     await this.$refs.loginForm.validate();
            //     console.log("成功");
            // } catch (error) {
            //     console.log("失败");
            // }
        },
    },
    mounted() {
        this.$refs.son.fn();
    },
};
</script>

<style>
* {
    padding: 0;
    margin: 0;
}
#app {
    width: 100%;
    height: 100vh;
    background-color: pink;
    display: flex;
    justify-content: center;
    align-items: center;
}
.login-card {
    width: 440px;
    height: 300px;
}
</style>
